<template>
  <div class="weather">
    <img :src="getDayweatherIcon(state.dayWeather.info)" class="weatherInfo" />
    <div class="info">
      <p>{{ state.dayWeather.info }}</p>
      <p>{{ Math.round(state.dayWeather.temperature) }}<span>℃</span></p>
      <p>{{ state.wind.direct === '9999'? state.wind.power : state.wind.direct }}</p>
    </div>
    <DetailsModal @register="registerModal" />
  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, onUnmounted} from 'vue';
  import {getWarnTask, getWeatherInfo} from '@/api/webservice/weather';
  import { iconfont } from './iconfont.ts';
  import {useModal} from "@gui-pkg/antdcomponents";
  import DetailsModal from './DetailsModal';

  defineOptions({ name: 'WeatherTime' });
  const [registerModal, { openModal }] = useModal();

  const state = reactive({
    dayWeather: {},
    wind: {},
    refreshIntervalHeader:null
  });

  const getDayweatherIcon = (name) => {
    for (let i = 0; i < iconfont.length; i++) {
      if (iconfont[i].name.includes(name)) {
        return `${iconfont[i].icon}`;
      }
    }
  };


  const openWarnTask = async () => {
    const warnTask = await getWarnTask();
    //console.log('--------warnTask----', warnTask);
    if (warnTask.length > 0) {
      openModal(true, {
        record: warnTask,
      });
    }
  };

  onMounted(async() => {
    const weatherLives = await getWeatherInfo();
    let { weather, wind } = weatherLives.data.real;
    state.dayWeather = weather;
    state.wind = wind;
    openWarnTask();
    state.refreshIntervalHeader = setInterval(() => {
      openWarnTask();
    }, 10000);//每10秒刷新一次
  });
  onUnmounted(() => {
    if (state.refreshIntervalHeader) {
      clearInterval(state.refreshIntervalHeader);
    }
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .weather {
    display: flex;
    align-items: center;
    margin-left: 30px;
    margin-right: 8px;
    margin-top: -14px;
    height: 34px;
    img.weatherInfo {
      width: 37px;
      height: 34px;
    }
    .info {
      display: flex;
      align-items: center;
      p {
        padding-left: 4px;
        padding-right: 6px;
        color: #323233;
      }
    }
  }
</style>
